<template>
  <div>
    <layout ref="layout" :title="title" :closable="false" @on-ok="saverOrUpdate" @on-cancel="back" :loading="loading">
      <Form slot="content" ref="formItem" :model="formItem" :label-width="80">
        <Form-item label="角色ID" prop="roleId">
          <Input  :disabled="true" type="text" v-model="formItem.roleId"></Input >
        </Form-item>
        <Form-item label="角色名称" prop="roleName" :rules="{required: true, message: '角色名称不能为空', trigger: 'blur'}">
          <Input :disabled="disable" type="text" v-model="formItem.roleName"></Input>
        </Form-item>
        <Form-item label="别称" prop="remark" :rules="{required: true, message: '别称不能为空', trigger: 'blur'}">
          <Input type="text" v-model="formItem.remark"></Input>
        </Form-item>
        <Form-item>
          <Tree ref="tree" :data="data1" show-checkbox multiple></Tree>
        </Form-item>
      </Form>
    </layout>
  </div>
</template>

<script>
import layout from '@/components/layout/layout.vue'
import { saveRole, info } from '../../../api/sys/role'
import { getAllMenuList } from '../../../api/sys/menu'

export default {
  name: 'menu-save-update',
  data () {
    return {
      loading: false,
      currentState: '',
      formItem: {},
      data1: [],
      temp: []
    }
  },
  components: {
    layout
  },
  computed: {
    title () {
      return this.currentState === 'edit' ? '编辑角色' : (this.currentState === 'add' ? '新增角色' : '')
    },
    disable () {
      return this.currentState === 'edit'
    }
  },
  methods: {
    saverOrUpdate () {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          let t = this.$refs['tree'].getCheckedAndIndeterminateNodes()
          this.formItem.menus = []
          t.forEach(item => {
            this.formItem.menus.push(item.menuId)
          })
          saveRole(this.formItem).then(res => {
            if (res.code === 200) {
              this.$refs['layout'].hide()
              this.back()
            }
          })
        }
      })
    },
    back () {
      this.currentState = 'normal'
      this.$refs['formItem'].resetFields()
      this.$emit('showTable')
    },
    showAdd () {
      this.loading = true
      this.formItem = {}
      this.data1 = this.getTreeMenu([], 0)
      this.currentState = 'add'
      this.$refs['layout'].show()
      this.loading = false
    },
    showEdit (id) {
      this.loading = true
      info(id).then(res => {
        this.formItem = res.data
        this.data1 = this.getTreeMenu(this.formItem.menus, 0)
        this.currentState = 'edit'
        this.$refs['layout'].show()
        this.loading = false
      })
    },
    getTreeMenu (menus, parentId) {
      let temp = []
      let treeArr = this.temp
      treeArr.forEach((item, index) => {
        if (item.parentId === parentId) {
          let obj = {}
          obj.title = treeArr[index].title
          obj.menuId = treeArr[index].id
          if (item.childrenCount !== 0) {
            obj.children = this.getTreeMenu(menus, treeArr[index].id)
          } else {
            if (menus.indexOf(obj.menuId) !== -1) {
              obj.checked = true
            } else {
              obj.checked = false
            }
          }

          temp.push(obj)
        }
      })

      return temp
    }
  },
  mounted () {
    getAllMenuList().then(res => {
      this.temp = res.data
    })
  }
}
</script>

<style scoped>
  /deep/ .ivu-modal-header {
    padding-top: 0px;
    padding-bottom: 0px;
    background: #f8f8f8;
    height: 42px;
  }

  /deep/ .ivu-modal-close {
    top: 5px;
  }

  /deep/ .ivu-modal-content {
    border-radius: 0px;
  }

  /deep/ .ivu-modal-header-inner {
    height: 42px;
    line-height: 42px;
  }

  /deep/ .ivu-modal-footer {
    background: #f0f4f7;
  }

  .ivu-modal-contract {
    z-index: 1;
    font-size: 12px;
    position: absolute;
    right: 40px;
    top: 2px;
    overflow: hidden;
    cursor: pointer;
  }

  .title {
    height: 42px;
    line-height: 42px;
  }
</style>
